import { createRouter, createWebHistory } from 'vue-router'
const Layout=()=>import('@/views/Layout');
const Home=()=>import('@/views/home/index')
const Category=()=>import('@/views/category/index')
const Search = () => import("@/views/search/index");
const Goods = () => import("@/views/goods/index");
const Login = () => import('@/views/login/index')
// 1. 定义路由规则：什么路径显示什么组件
const routes = [
  {
    path: "/",
    component: Layout,
    children: [{ path: "/", component: Home },
    { path: "/category/:id", component: Category },
    { path: "/search", component: Search },
    { path: "/product/:id", component: Goods },
  ],
  },
  { path: '/login', component: Login }
];
// 2. createRouter函数是router实例的
const router = createRouter({
  // 3. history 配置路由模式：hash(localhost:8080/#/home)    history(localhost:8080/home)
  // createWebHashHistory() 创建hash模式的路由
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 前进后退的时候，回到页面原理滚动的位置（还原浏览器原生效果）
    if (savedPosition) {
      return savedPosition;
    } else {
      // 没有浏览过的到页面顶部
      return { top: 0 };
    }
  },
})

export default router
